import React , { Component } from "react";

import {range} from "../../../utils/tools"
export default class TMSB extends Component{
  constructor (props){
    super(props)
    this.state= {
      hover:false,
      tmbs_1:0,
      tmbs_2:1,
      tmbs_3:2
    }
 }

 onPeiyuSelected(item) {
   this.setState({
     hover:!this.state.hover
   })
   let num1 = this.refs.tmbs_1.value;
   let num2 = this.refs.tmbs_2.value;
   let num3 = this.refs.tmbs_3.value;
   item.number = [num1, num2, num3].join(',');
   console.log(item,"dadfadfa");
  this.props.order(item);
}

 onTMBSChange(item) {
  let num1 = this.refs.tmbs_1.value;
  let num2 = this.refs.tmbs_2.value;
  let num3 = this.refs.tmbs_3.value;
  this.setState({
    tmbs_1:num1,
    tmbs_2:num2,
    tmbs_3:num3
  })
  // item.number = [num1, num2, num3].join(',');
  window.event?window.event.cancelBubble=true:event.stopPropagation()
  return false
}

  render(){
    const {content} = this.props;
    let tmsb = content[28]  // 注意这边是直接返回数组中第28位 没有通过遍历寻找特码包三
    var item = tmsb
     return  <div className="panl">
              <div className={this.state.hover? "tmbs selected":"tmbs"} 
              >
              <p className="red">{item.pl}</p>
              <div className="select-wrapper">
                <select onChange={this.onTMBSChange.bind(this, item)} ref="tmbs_1">
                    {range(0, 27).map( num => {
                      return <option key={num} value={num}>{num}</option>
                    })}
                  </select>
                  <select onChange={this.onTMBSChange.bind(this, item)} ref="tmbs_2">
                    {range(0, 27).map( num => {
                      if (num != this.state.tmbs_1){
                        return <option key={num} value={num}>{num}</option>
                      }
                    })}
                  </select>
                  <select onChange={this.onTMBSChange.bind(this, item)} ref="tmbs_3">
                    {range(0, 27).map( num => {
                      if (num != this.state.tmbs_1 && num != this.state.tmbs_2){
                      return <option key={num} value={num}>{num}</option>
                      }
                    })}
                  </select>
              </div>
              <button onClick={this.onPeiyuSelected.bind(this, item)} >选择</button>
              </div>
      </div>
  }
}